<template>
	<div id="myGallery">
		<search :selectedList='selectedList' :total='total' :currentTotal='imgCount' :privateTotal='privateTotal' @delete='deleteImg' @search='searchImg'>
			<template slot='txt'>
				<el-input v-model="searchValue" @keydown.enter.native='searchImg' placeholder="输入图片备注搜索" clearable></el-input>
				<el-switch
					@change='searchImg'
					v-model="searchSwitch"
					active-text="是私密"
					inactive-text="不是私密">
				</el-switch>
			</template>
		</search>
  		<tableList 
			:tableData="tableData" 
			:tableHeader="tableHeader"  
			:total='imgCount'
			:page='page' 
			:loading="loading" 
			@selectionChange='handleSelectionChange'
			@changePage='handleCurrentChange'
			@copyText='copyText'
			@changeSwitch='editImgPrivate'>
		</tableList>
		<el-drawer
		    class='imgDrawer'
		    size='68%'
		    title="图片详情"
		    :visible.sync="drawer"
		    :append-to-body='true'	
		    :direction="direction">
		 	<imgDetail :drawerData='drawerData'></imgDetail>
		</el-drawer>
	</div>
</template>
<script>
	import search from '@/components/search'
	import imgDetail from '@/components/imgDetail'
	import tableList from '@/components/tableList'
	import {api} from '@/api/public'
	export default {
	name:'myGallery',
	data(){
		return {
			tableData: [],	
			loading:true,
			imgCount:0,
			total:0,
			privateTotal:0,
	        loading:true,
	        delVisible:false,
	        searchSwitch:false,
	        searchValue:'',
	        selectedList:[],
	        page:1,
	        drawer: false,
	        drawerData:'',
        	direction: 'rtl',
			tableHeader:[
				{ prop: 'id', label: '图片Id', width: '100px' },
				{ prop: 'url', label: '图片缩略图',width:"200px",isImg:true,title:'点我预览图片' },
				{ prop: 'note', label: '图片备注',width:'160px',isText:true},
				{ prop: 'name', label: '上传用户',minWidth:'120px'},
				{ prop: 'create_time', label: '上传时间',minWidth:'95px'},
				{ prop: 'url', label: '图片地址',minWidth: '140px',isCopy:true},
				{ prop: 'is_private', label: '是否私密',width:"85px",isSwicth:true,},
				{ prop: 'oper', label: '操作', fixed: 'right', width: '135px',
					oper: [
						{ name: '查看',clickFun:this.openDrawer},
						{ name: '编辑',clickFun:this.editImgNote},
						{ name: '删除',clickFun:this.deleteImg}
					]
				}
			],
		}
	}, 
    methods: {
        openDrawer(row) {
        	this.drawer=true;
        	this.drawerData=row;
      	},
        deleteImg(item,index,tableData) {
        	this.$confirm('你确定要删除该图片吗？')
	        .then(async res => {
	        	let ids;
	        	if(index!==undefined) ids=[item.id];
        		else{
					ids=this.selectedList.map((item)=>{ return item.id; })  
				}
				let routerName=this.$route.name;
				let data=null;
	    		if(routerName=='imageManage') data=await api('delete','admin','image',{id:ids});
	    		else{
	    			let userId=sessionStorage.getItem('id');
	    			data=await api('delete','image',-1,{imgId:ids});
	    		}
	        	if(data.success){
	        		this.info('图片删除成功~~~');
	        		this.imgCount--;
	        		this.$bus.$emit('imgCount');
				    if(this.imgCount===0){
	        			tableData=[];
	        			return;
	        		}
	        		let page=this.page;
	        		if((this.imgCount/10)==page-1) this.page--;
	        		this.getImgList(this.page);
	        		this.getImgCount();
	        	}
	        	else this.info('图片删除失败~~~','e');
	        }).catch(res => {});	
      	},
      	handleSelectionChange(val) {	
			this.selectedList=val;
      	},
      	handleCurrentChange(page) {
      		this.page=page;
        	this.getImgList(page);
      	},
      	copyText(This){
      		This.target.select();
      		document.execCommand("Copy");
      		this.info('图片地址复制成功');
      	},
      	async getImgCount(){
      		let userId=sessionStorage.getItem('id');
      		let routerName=this.$route.name;
      		let result;
	    	if(routerName=='imageManage') result=await api('get','admin','image','','count');
      		else result=await api('get','image','getCount');
      		this.total=result.imgCount;
	      	this.privateTotal=result.privateImgCount;
      	},
	    async getImgList(page){
	    	let getListApi='';
	    	let timer=null;
	    	let isPrivate=sessionStorage.getItem('isPrivate');
	    	isPrivate=='true'?isPrivate=1:isPrivate=0;
	    	if(this.searchSwitch!=isPrivate) this.searchSwitch=isPrivate;
	    	let value=sessionStorage.getItem('searchValue');
	    	if(this.searchValue!=value) this.searchValue=value;
	    	let routerName=this.$route.name;
	    	let data=null;
	    	if(routerName=='imageManage') data=await api('get','admin','image',{page:page,imgNote:this.searchValue,isPrivate:isPrivate});
	    	else data=await api('get','image',-1,{page:page,imgNote:this.searchValue,isPrivate:isPrivate})
	    	if(data.result.length===0) this.page=1;
		    this.tableData=data.result;
		    this.imgCount=data.count;
		    timer=setTimeout(()=>{
		    	this.loading=false;
		    },600);	
	    },
	    searchImg(){
	    	sessionStorage.setItem('searchValue',this.searchValue);
	    	sessionStorage.setItem('isPrivate',this.searchSwitch);
	    	this.handleCurrentChange(1);
	    },
	    async editImgNote(row,index,tableData){
	    	if(row.note=='') this.info('该图片的备注目前为空~~~','w');
	    	else{
	    		let routerName=this.$route.name;
	    		let data;
	    		if(routerName=='imageManage') data=await api('put','admin','image',{imgId:row.id,isPrivate:null,imgNote:row.note});
		    	
		    	else data=await api('put','image',-1,{imgId:row.id,isPrivate:null,imgNote:row.note});
	    		if(data.success) this.info('该图片的备注修改成功~~~');
	    		else this.info('图片备注修改失败~~~','e');
	    	}   	
	    },
	    async editImgPrivate(value,imgId){
	    	let userId=sessionStorage.getItem('id');
	    	let routerName=this.$route.name;
	    	let data=null;
	    	if(routerName=='imageManage') data=await api('put','admin','image',{imgId:imgId,isPrivate:value,imgNote:null});
	    	else data=await api('put','image',-1,{imgId:imgId,isPrivate:value,imgNote:null});
	    	if(data.success){
	    		this.info('设置图片是否私密成功~~~');
				this.getImgList(this.page);
				this.getImgCount();
				this.$bus.$emit('imgCount');     	
	    	}
	    	else this.info('设置图片是否私密失败~~~','e');
	    },
	    initStorage(){
    		this.loading=true;
	    	sessionStorage.setItem('searchValue','');
    		sessionStorage.setItem('isPrivate',0);
	    }
    },
    created(){
    	this.initStorage();
    	this.getImgCount();
    	this.getImgList(this.page);
    	this.$bus.$on('changeName',(value)=>{
			this.tableData.forEach(item=>{
				item.name=value;
			})
		})
		this.$bus.$on('changeAvator',(newAvator)=>{
            this.getImgList(this.page);
        })
    },
    beforeDestroy(){
    	// bus.$off('changeName');
    	// bus.$off('changeAvator');
    	sessionStorage.removeItem('searchValue');
    	sessionStorage.removeItem('isPrivate',0);
    },
    beforeRouteEnter (to, from, next) {
    	if(from.name=='imageManage'){
    		next(vm=>{
    			vm.initStorage();
    			vm.getImgCount();	
    			vm.page=1;
    			vm.getImgList(1);
    		})
    	}
    	else next();
    },
    watch: {
    	$route: {
    		handler () {    
    			if (this.$route.name === 'imageManage') {
    				this.page=1;
    				this.initStorage();
			    	this.getImgCount();
			    	this.getImgList(1);
    			}
    		},	
		},
	},
    components:{
    	imgDetail,tableList,search
    }
}
</script>
<style scoped lang='stylus'>
	#myGallery {
		>>> .el-image-viewer__close {
			top:50px;
			right: 50px;
			color:red;
			width: 50px;
			height:50px;
		}
		>>> .el-image-viewer__close>i{
			font-size: 50px;
		}
		>>>.el-image{
			&.img{
				>img{
					max-width:85%;
					width: auto;
    				height: auto;
				}
			}
		}
	}
</style>